<template>
    <div class="" id="CustomerComplaint">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="primary">客户投诉</el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>

        <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
                <datepickersummary></datepickersummary>
            </el-col>
        </el-row>
        <!-- <el-row>
            <eldatepickersingle
                v-on:dateTime="dateTime"
                :droplist1="datepicker_info.droplist1"
                :droplist2="datepicker_info.droplist2">
            </eldatepickersingle>
        </el-row> -->
        <template v-if="!filters.radio">
            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>客户投诉解决率</h5>
                        </div>
                        <div class="ibox-content">
                            <ve-pie :data="chartPieDataCustomerCRate" :settings="chartPieSettings"></ve-pie>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>客户投诉解决趋势(每周)</h5>
                        </div>
                        <div class="ibox-content">
                            <ve-line :data="chartLineCustomerData" :settings="chartLineSettings"></ve-line>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div class="ibox">
                        <div class="ibox-title">
                        <h5>客户投诉信息</h5>
                        </div>
                        <div class="ibox-content">
                            <el-table
                                ref="filterTable"
                                :data="tableDataCC"
                                style="width: 100%">
                                <el-table-column
                                    prop="submitdate"
                                    label="日期"
                                    min-width="">
                                </el-table-column>
                                <el-table-column
                                    prop="number"
                                    min-width=""
                                    label="序号">
                                </el-table-column>
                                <el-table-column
                                    prop="customername"
                                    min-width=""
                                    label="客户">
                                </el-table-column>
                                <el-table-column
                                    prop="status"
                                    min-width=""
                                    label="问题状态">
                                </el-table-column>
                                <el-table-column
                                    prop="qaname"
                                    min-width=""
                                    label="负责QA">
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                style="padding-top: 10px;"
                                background
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </template>

        <template v-else>
            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid
                    :label_info="deptlableinfo.patchtotal"
                    :label_data="getFix(deptlable.cc_count)"
                    :label_import="'small'"
                    :label_avg="standardKPI.customer_complaint_avg_project"
                    :label_now="deptlable.cc_count"
                    :label_good="kpi.customer_complaint_avg_project"
                    :label_precent="'num'"
                    :nessary="true">
                    </LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="deptlableinfo.inline" :label_data="getFix(deptlable.cc_new_current_month_count)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="deptlableinfo.defect_concentration" :label_data="getFix(deptlable.cc_close_count)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid
                    :label_info="deptlableinfo.defect_effective_rate"
                    :label_data="getPrecent(deptlable.cc_close_rate)"
                    :label_import="'big'"
                    :label_avg="standardKPI.customer_complaint_closed_rate_avg_project"
                    :label_now="deptlable.cc_close_rate"
                    :label_good="kpi.customer_complaint_closed_rate_avg_project"
                    :label_precent="'precent'"
                    :nessary="true">
                    </LabelGrid>
                </el-col>
            </el-row>

            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <el-row :gutter="30">
                        <el-col :xs="24" :sm="24" :lg="8">
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <div class="ibox-title pad">
                                        客户投诉分类
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                            </el-row>
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <ve-pie :data="typecustomer"></ve-pie>
                                </el-col>
                            </el-row>
                        </el-col>

                        <el-col :xs="24" :sm="24" :lg="8">
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <div class="ibox-title pad">
                                        客户投诉解决状态
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                            </el-row>
                            <el-row class="bgColor">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <ve-pie :data="customer"></ve-pie>
                                </el-col>
                            </el-row>
                        </el-col>

                        <el-col class="bgColor" :xs="24" :sm="24" :lg="8">
                            <div class="content">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <el-card class="box-card m-b" shadow="never">
                                        <div slot="header" class="clearfix" style="vertical-align:middle">
                                        <div style="float: left; padding: 10px 0">投诉次数统计</div>
                                        <!-- <el-radio-group v-model="importedSelected" style="float: right; padding: 3px 0" size="mini">
                                            <el-radio-button label="事业群"></el-radio-button>
                                            <el-radio-button label="事业部"></el-radio-button>
                                        </el-radio-group> -->
                                        </div>
                                        <div> <!--  -->
                                        <el-table
                                            :data="currentImportDeptData"
                                            style="width: 100%"
                                            :height="'355'"
                                            max-height="355">
                                            <el-table-column width="100" align="center" label="排名">
                                            <template slot-scope="scope">
                                                <el-tag v-if="scope.$index===0" type="danger" size="medium" >
                                                TOP{{ scope.$index + 1 }}
                                                </el-tag>
                                                <el-tag v-else-if="scope.$index===1" type="warning" size="medium" >
                                                TOP{{ scope.$index + 1 }}
                                                </el-tag>
                                                <el-tag v-else-if="scope.$index===2" type="primary" size="medium" >
                                                TOP{{ scope.$index + 1 }}
                                                </el-tag>
                                                <span v-else> {{scope.$index + 1}} </span>
                                            </template>
                                            </el-table-column>
                                            <el-table-column
                                            prop="project_name"
                                            align="center"
                                            label="项目">
                                            </el-table-column>
                                            <el-table-column
                                            prop="customer_complaint_count"
                                            label="投诉次数"
                                            align="center"
                                            width="80">
                                            </el-table-column>
                                        </el-table>
                                        <!-- <el-pagination
                                            :page-size="10"
                                            :pager-count="5"
                                            @current-change="handleCurrentImportDeptChange"
                                            :current-page="currentImportDeptPage"
                                            layout="prev, pager, next"
                                            style="text-align: center"
                                            :total="totalDeptData">
                                        </el-pagination> -->
                                        </div>
                                        <!-- <div v-else>
                                        <el-table
                                            :data="currentImportDeptData"
                                            style="width: 100%"
                                            :height="'355'"
                                            max-height="355">
                                            <el-table-column width="100" align="center" label="排名">
                                            <template slot-scope="scope">
                                                <el-tag v-if="scope.row.rank===1" type="danger" size="medium" >
                                                TOP{{ scope.row.rank }}
                                                </el-tag>
                                                <el-tag v-else-if="scope.row.rank===2" type="warning" size="medium" >
                                                TOP{{ scope.row.rank }}
                                                </el-tag>
                                                <el-tag v-else-if="scope.row.rank===3" type="primary" size="medium" >
                                                TOP{{ scope.row.rank }}
                                                </el-tag>
                                                <span v-else> {{scope.row.rank}} </span>
                                            </template>
                                            </el-table-column>
                                            <el-table-column
                                            prop="name"
                                            align="center"
                                            label="事业群">
                                            </el-table-column>
                                            <el-table-column
                                            prop="times"
                                            align="center"
                                            label="投诉次数"
                                            width="80">
                                            </el-table-column>
                                        </el-table>
                                        <el-pagination
                                            :page-size="10"
                                            :pager-count="5"
                                            @current-change="handleCurrentImportGroupChange"
                                            :current-page="currentImportGroupPage"
                                            layout="prev, pager, next"
                                            style="text-align: center"
                                            :total="totalGroupData">
                                        </el-pagination>
                                        </div> -->
                                    </el-card>
                                </el-col>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <div class="tab">
                <el-row class="bgColor marT">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24">
                                <div class="ibox-title pad">
                                    客户投诉
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <ve-line
                                :data="lineChartData"
                                :legend-visible="true"
                                :colors="colors"
                                :settings="lineChartSettings"
                                :data-zoom="lineDataZoom"
                                :data-empty="dataEmpty1"></ve-line>
                            </el-col>
                        </el-row>
                        <!-- <el-tabs type="border-card" v-model="activeName">
                            <el-tab-pane name="0" label="客户投诉解决">
                                <ve-line
                                :data="lineChartData"
                                :legend-visible="true"
                                :colors="lineColor"
                                height="300px"
                                ref="vline0"
                                :data-zoom="lineDataZoom"
                                :data-empty="dataEmpty1"></ve-line>
                            </el-tab-pane>
                            <el-tab-pane name="1" label="客户投诉流程覆盖率">
                                <ve-line
                                    :data="lineChartData"
                                    :legend-visible="true"
                                    :colors="lineColor"
                                    height="300px"
                                    ref="vline1"
                                    :data-zoom="lineDataZoom"
                                    :data-empty="dataEmpty1"></ve-line>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="客户投诉流程符合度">
                                    <ve-line
                                        :data="lineChartData"
                                        :legend-visible="true"
                                        :colors="lineColor"
                                        height="300px"
                                        ref="vline2"
                                        :data-zoom="lineDataZoom"
                                        :data-empty="dataEmpty1"></ve-line>
                            </el-tab-pane>
                            <el-tab-pane name="3" label="纠正预防措施关闭率">
                                    <ve-line
                                        :data="lineChartData"
                                        :legend-visible="true"
                                        :colors="lineColor"
                                        height="300px"
                                        ref="vline3"
                                        :data-zoom="lineDataZoom"
                                        :data-empty="dataEmpty1"></ve-line>
                            </el-tab-pane>
                        </el-tabs> -->
                    </el-col>
                </el-row>
            </div>

            <div class="tablist">
                <el-row class="bgColor marT">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <div class="ibox-title pad">项目列表</div>

                        <div class="table mar">
                            <el-table :data="tabledata" :header-cell-style="{background:'#eef1f6'}" style="width: 100%">
                                <el-table-column
                                    align="center"
                                    type="index"
                                    label="编号"
                                    width="60">
                                    <template slot-scope="scope">
                                        <span>{{ scope.$index + 1 + tablesize*(tablecurrent - 1) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="project_name"
                                    label="项目名称"
                                    >
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="cc_count"
                                    label="投诉件数(个)"
                                    >
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="cc_new_current_month_count"
                                    label="投诉新增(本月)"
                                    >
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="cc_close_count"
                                    label="投诉已解决"
                                    >
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="cc_close_rate"
                                    label="投诉关闭率"
                                    :formatter="formatter_rate"
                                    >
                                </el-table-column>
                            </el-table>

                            <el-pagination class="marT"
                                :page-size="tablesize"
                                background
                                @size-change="tableSizeChange"
                                @current-change="tableCurrentImportDeptChange"
                                :current-page="tablecurrent"
                                layout="total, prev, pager, next, jumper"
                                style="text-align: center"
                                :total="tabletotal">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
</template>
<script>
import DatePicker from '@/components/qa/DatePicker.vue'
import ElDatePickerSingle from '@/components/qa/ElDatePickerSingle.vue'
import DataTable from '@/components/qa/DataTable.vue'
import Chart from '@/components/qa/Chart.vue'
import FlotChart from '@/components/qa/FlotChart.vue'
import { getToken } from '@/utils/auth'
import LabelGrid from '@/components/qa/Label.vue'
import DatePickerSummary from '@/views/summary/DatePickerSummary'
import { mapState } from 'vuex'
import { getHeader } from '@/app.config'
import { getKpi2 } from '@/api/kpi'
import 'v-charts/lib/style.css'
import 'echarts/lib/component/dataZoom'

export default {
    name: 'CustomerComplaint',
    components: {
        eldatepickersingle: ElDatePickerSingle,
        DatePicker,
        DataTable,
        Chart,
        FlotChart,
        LabelGrid,
        datepickersummary: DatePickerSummary
    },
    computed: {
        ...mapState({
            filters: state => state.filters,
            allDepartmentList: state => state.allDepartmentList,
            standardKPI: state => state.standardKPI
        })
    },
    data () {
        return {
            kpi: {},
            date: '',
            project_id: '',
            importedSelected: '事业群',
            activeName: 0,
            colors: ['#ed5565'],
            lineColor: ["#7cb5ec"],
            dataEmpty1: true,
            lineDataZoom:[{
                type: 'slider',
                start: 0,
                end: 100
            }],
            tablesize: 10,
            tablecurrent: 1,
            tabletotal: 0,
            tabledata: [],
            deptlable: {},
            deptlableinfo: {
                patchtotal: {
                    label_hname: '投诉件数',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                inline: {
                    label_hname: '投诉新增(本月)',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                defect_concentration: {
                    label_hname: '投诉已解决',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success'
                },
                defect_effective_rate: {
                    label_hname: '投诉关闭率',
                    label_header: 'Avg',
                    label_unit: '',
                    label_class: 'success'
                }
            },
            lineChartData: {
                columns: ["c_submitdate", "c_number__count"],
                rows: [

                ]
            },
            lineChartSettings: {
				labelMap: {
                    c_number__count: '投诉数'
				}
            },
            customer: {
                columns: ['status', 'count'],
                rows: []
            },
            typecustomer: {
                columns: ['type', 'count'],
                rows: []
            },
            currentImportDeptData: [],
            datepicker_info: {
                droplist1: {
                    title: '',
                    data: []
                },
                droplist2: {
                    title: '',
                    data: []
                },
                url: '',
            },
            currentPage: 1,
            total: 0,
            tableDataCC: [],
            chartinfo: {
                date: 1,
                linechart1: {
                    id: ['div_4', 'canvas_4'],
                    type: 'line',
                    title: '客户投诉解决趋势(每周)',
                    labels: [],
                    datasets: [
                        {
                            label: "客户投诉总计",
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                        {
                            label: "客户投诉未关闭数量",
                            backgroundColor: 'rgba(255,0,0,0.5)',
                            borderColor: "rgba(255,0,0,0.7)",
                            pointBackgroundColor: "rgba(255,0,0,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                },
            },
            chartPieDataCustomerCRate: {
                columns: ['cc_status', 'count'],
                rows: []
            },
            chartPieSettings: {
                radius: 100,
            },
            chartLineCustomerData: {
                columns: ['date', 'allcount', 'uncompletecount'],
                rows: []
            },
            chartLineSettings: {
                // stack: { 'date': ['allcount', 'uncompletecount'] },
                area: true,
                labelMap: {
                    allcount: '客户投诉总计',
                    uncompletecount: '客户投诉未关闭'
                }
            }
        }
    },
    methods: {
        getLabelKpi(type) {
            getKpi2(type).then(res => {
                if (res.status == 200) {
                    if (res.data.code === 200) {
                        this.kpi = res.data.avg_kpi
                    }
				}
            })
        },
        filterObject() {
            this.getData()
        },
        formatter_rate(row, column, cellValue, index) {
            var str = Number(cellValue*100).toFixed(2);
            str += "%";
            return str;
        },
        getFix(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0;
            } else {
                return data
            }
        },
        getPrecent(num) {
            if (null == num || "undefined" == typeof(num) || "" == num) {
                return 0
            } else {
                return (num*100).toFixed(2) + '%'
            }
        },
        tableSizeChange(val) {
            this.tablesize = val
        },
        tableCurrentImportDeptChange(val) {
            this.tablecurrent = val
            this.getdeptkpi()
        },
        dateTime: function(dateTime) {
            this.date = dateTime;
        },
        getData: function() {
            //let time = this.filters.time
            if(!this.filters.radio) {
                this.getCustomerCCloseRate(this.filters.projectId, this.filters.time);
                this.getCustomerComplaint(this.filters.projectId, this.filters.time, this.currentPage);
                this.getCusStatistics(this.filters.projectId, this.filters.time);
            } else {
                this.getdeptList()
                this.getLabelKpi('CustomerComplaint')
                this.getdeptcustomer()
                this.getdeptstatus()
                this.getdepttype()
                this.getLineData()
                this.getdeptkpi()
            }
            //this.getCustomerComplaint(this.filters.projectId, time, 1);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getCustomerComplaint(this.filters.projectId,this.filters.time,this.currentPage);
        },
        getCustomerComplaint: function(project, time, page) {
            this.$axios.get('/api/qa/projcustomercomplaint?projectId='+project+'&time='+time+'&page='+page, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.status == 200) {
                            if (response.data.code == 200) {
                                this.tableDataCC = response.data.customercomplaint;
                                this.total = response.data.count;
                            }
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getCustomerCCloseRate: function(project, time) {
            this.$axios.get('/api/qa/projcustomerccloserate?projectId='+project+'&time='+time, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.chartPieDataCustomerCRate.rows = response.data.cc_close_rate;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getCusStatistics: function(project, time) {
            this.$axios.get('/api/qa/projcustomerstatistic?projectId='+project+'&time='+time, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.chartLineCustomerData.rows = response.data.cus_statistic;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getLineData() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-customer-complaint-trend?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                        this.dataEmpty1 = false
                        this.lineChartData.rows = res.data.trend_list
                   }
                }
            })

        },
        getdeptkpi() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`api/qa/dept-proj-customer-complaint-kpi?time=${this.filters.time}&page=${this.tablecurrent}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       this.tabledata = res.data.project_kpi_list
                       this.tabletotal = res.data.count
                   }
                }
            })
        },
        getdepttype() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`api/qa/dept-customer-complaint-type-ratio?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       this.typecustomer.rows = res.data.ratio_list
                   }
                }
            })
        },
        getdeptstatus() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`api/qa/dept-customer-complaint-status-ratio?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res.data)
                       this.customer.rows = res.data.ratio_list
                   }
                }
            })
        },
        getdeptcustomer() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`api/qa/dept-customer-complaint-summary?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res.data)
                       this.deptlable = res.data.summary
                   }
                }
            })
        },
        getdeptList() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`api/qa/dept-projrank-by-complaint-count?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       console.log(res.data)
                       this.currentImportDeptData = res.data.rank_list
                    //    this.pieChartData.rows = res.data.ratio_list
                   }
                }
            })
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData()
            },
            deep: true,
        }
        // activeName(v) {
        //     this.$nextTick(() => {
		// 		this.$refs[`vline${v}`].echarts.resize()
		// 	})
        // }
    },
    created: function() {
        // this.project_id = this.$route.params.pmsProjectId
    },
    mounted: function() {
        this.getData()
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    #CustomerComplaint{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
    .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
    .table{
        padding-bottom: 10px;
    }
    #CustomerComplaint >>> .el-card{
        border: 0;
    }
</style>
